<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合同管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        [v-cloak]{
            display: none;
        }
        html,body,#app{
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        #app{
            overflow: scroll;
            background: #F0F0F0;
        }
        .el-form{
            width: 80%;
            margin: 0 10%;
            box-sizing: border-box;
            padding: 10px 30px 50px 30px;
            background: white;
            min-height: 100%;
        }
        .el-col{
            box-sizing: border-box;
            padding-right: 12px;
        }
        .el-table{
            width: 80%!important;
            margin: 0 10%;
            box-sizing: border-box;
            padding: 10px 30px 50px 30px;
            background: white;
            min-height: 100% !important;
        }
    </style>
</head>
<body>
<div id="app">
<!--    添加按钮-->
    <div v-cloak style="text-align: right;width: 80%;margin: 0 10%;">
        <span>
            <el-button type="text" @click="addContractVisible = true">添加</el-button>
        </span>
    </div>
<!--    合同列表-->
    <el-table
            v-cloak
            :data="contractList"
            style="width: 100%">
        <el-table-column
                prop="dealTime"
                label="签订时间"
                width="160">
        </el-table-column>
        <el-table-column
                prop="signTime"
                label="开始时间"
                width="160">
        </el-table-column>
        <el-table-column
                prop="dealContent"
                label="内容"
                width="*">
        </el-table-column>

        <el-table-column width="240">
            <template slot-scope="scope">
<!--                查看-->
                <el-button type="success" icon="el-icon-view" size="small"
                           @click="view(scope.row)"></el-button>
<!--                可操作-->
                <el-button type="primary" icon="el-icon-edit" size="small"
                           v-if="scope.row.canFix"
                           @click="edit(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="small"
                           v-if="scope.row.canFix"
                           @click="delete1(scope.$index,scope.row)"></el-button>
<!--                不可操作-->
                <el-button type="info" disabled icon="el-icon-edit" size="small"
                           v-if="!scope.row.canFix"></el-button>
                <el-button type="info" disabled icon="el-icon-delete" size="small"
                           v-if="!scope.row.canFix"></el-button>
            </template>
        </el-table-column>

    </el-table>
<!--    添加合同-->
    <el-dialog
            v-cloak
            title="添加合同"
            width="80%"
            :visible.sync="addContractVisible">
        <el-form
                :model="contract"
                ref="contract"
                label-width="80px"
                class="demo-dynamic"
                size="medium">
            <el-form-item label="客 户">
                <el-row>
                    <el-col :span="10">
                        <el-select v-model="contract.clientId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in clientList"
                                    :key="item.clientId"
                                    :label="item.clientName"
                                    :value="item.clientId">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4" style="text-align: right;">
                        时间
                    </el-col>
                    <el-col :span="10" style="padding: 0">
                        <el-date-picker
                                style="width: 100%;"
                                v-model="contract.signTime"
                                type="date"
                                value-format="timestamp"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="员 工">
                <el-row>
                    <el-col :span="10">
                        <el-select v-model="contract.userId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in userList"
                                    :key="item.userId"
                                    :label="item.userName"
                                    :value="item.userId">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="内 容">
                <el-input type="textarea" :rows="4" v-model="contract.content"></el-input>
            </el-form-item>
            <el-form-item
                    v-for="(item, index) in contract.goods"
                    :label="!index?'商 品':''"
                    :key="item.key">
                <el-row>
                    <el-col :span="7">
                        <el-select v-model="item.name" filterable placeholder="名称">
                            <el-option
                                    v-for="item in goodsList"
                                    :key="item.goodsName"
                                    :label="item.goodsName"
                                    :value="item.goodsName">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="7">
                        <el-input v-model="item.price" placeholder="单价"></el-input>
                    </el-col>
                    <el-col :span="7">
                        <el-input v-model="item.num" type="number" placeholder="数量"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <el-button type="danger" @click.prevent="removeGood(item)">删除</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item style="text-align: left;">
                <span style="text-align: left;">
                <el-button @click="addGood">添加商品</el-button>
                <el-button @click="resetForm">重置</el-button>
                </span>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addContractVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </span>
    </el-dialog>
<!--    查看合同-->
    <el-dialog
            v-cloak
            title="查看合同"
            width="80%"
            :visible.sync="viewContractVisible">
        <el-form
                :model="viewContract"
                ref="viewContract"
                label-width="100px"
                class="demo-dynamic"
                size="medium">
            <el-form-item label="客 户">
                <el-row>
                    <el-col :span="10">
                        <el-input v-model="viewContract.clientName" readonly></el-input>
                    </el-col>
                    <el-col :span="4" style="text-align: right;">
                        时间
                    </el-col>
                    <el-col :span="10" style="padding: 0">
                        <el-input v-model="viewContract.signTime" readonly></el-input>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="员 工">
                <el-input v-model="viewContract.userName" readonly></el-input>
            </el-form-item>
            <el-form-item label="内 容">
                <el-input type="textarea" :rows="4" v-model="viewContract.dealContent" readonly></el-input>
            </el-form-item>
            <el-form-item
                    v-for="(item, index) in viewContract.goods"
                    :label="!index?'商 品':''"
                    :key="item.key">
                <el-row>
                    <el-col :span="7">
                        <el-input v-model="item.goodsname" readonly></el-input>
                    </el-col>
                    <el-col :span="7">
                        <el-input v-model="item.goodsprice" readonly></el-input>
                    </el-col>
                    <el-col :span="7">
                        <el-input v-model="item.goodsnumber" readonly></el-input>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="viewContractVisible = false">取 消</el-button>
            <el-button type="primary" @click="viewContractVisible = false">确 定</el-button>
        </span>
    </el-dialog>
<!--    编辑合同-->
    <el-dialog
            v-cloak
            title="编辑合同"
            width="80%"
            :visible.sync="editContractVisible">
        <el-form
                :model="editContract"
                label-width="100px"
                class="demo-dynamic"
                size="medium">
            <el-form-item label="客 户">
                <el-row>
                    <el-col :span="10">
                        <el-select v-model="editContract.clientId" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in clientList"
                                    :key="item.clientId"
                                    :label="item.clientName"
                                    :value="item.clientId">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4" style="text-align: right;">
                        时间
                    </el-col>
                    <el-col :span="10" style="padding: 0">
                        <el-date-picker
                                style="width: 100%;"
                                v-model="editContract.signTime"
                                type="date"
                                value-format="timestamp"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="内 容">
                <el-input type="textarea" :rows="4" v-model="editContract.dealContent"></el-input>
            </el-form-item>
            <el-form-item
                    v-for="(item, index) in editContract.goods"
                    :label="!index?'商 品':''"
                    :key="item.key">
                <el-row>
                    <el-col :span="7">
                        <el-select v-model="item.goodsname" filterable placeholder="名称">
                            <el-option
                                    v-for="item in goodsList"
                                    :key="item.goodsName"
                                    :label="item.goodsName"
                                    :value="item.goodsName">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="7">
                        <el-input v-model="item.goodsprice" placeholder="单价"></el-input>
                    </el-col>
                    <el-col :span="7">
                        <el-input v-model="item.goodsnumber" placeholder="数量"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <el-button type="danger" @click.prevent="removeGood(item)">删除</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item style="text-align: left;">
            <span style="text-align: left;">
            <el-button type="primary" @click="addEditGood">添加商品</el-button>
            </span>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editContractVisible = false">取 消</el-button>
            <el-button type="primary" @click="editForm">确 定</el-button>
        </span>
    </el-dialog>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data(){
            return{
                userId: '',
                addContractVisible: false,
                viewContractVisible: false,
                editContractVisible: false,
                contract: {
                    userId: '',
                    clientId: '',
                    content: '',
                    goods: [{
                        name: '',
                        price: '',
                        num: '',
                        key: Date.now()
                    }],
                    signTime: ''
                },
                viewContract: '',
                editContract: '',
                clientList: [],
                userList: [],
                goodsList: [
                    {
                        goodsName: '没有数据',
                    },
                    {
                        goodsName: '没有数据',
                    },
                ],
                contractList: [],
            }
        },
        created() {
            this.getUserId();
            this.getClientList();
            this.getGoodList();
            this.getContractList();
            this.getUserList();
        },
        methods: {
            getUserId(){
                axios.post(
                    '/member/getUserId'
                ).then(function (res) {
                    // console.info(res.data);
                    app.userId = res.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            submitForm() {

                if(this.contract.clientId==''){
                    alert("客户不能为空");
                    return;
                }
                if(this.contract.signTime==''){
                    alert("时间不能为空");
                    return;
                }
                if(this.contract.userId==''){
                    alert("员工不能为空");
                    return;
                }
                if(this.contract.content==''){
                    alert("合同内容不能为空");
                    return;
                }
                let goods = '';
                let list = this.contract.goods;
                // 显微镜!1#1
                for(let key in list){
                    if(list[key].name==''){
                        alert("商品名称不能为空!");
                        return;
                    }
                    if(list[key].price==''){
                        alert("商品单价不能为空!");
                        return;
                    }
                    if(list[key].price<=0){
                        alert("商品单价必须大于0!");
                        return;
                    }
                    if(list[key].num==''){
                        alert("商品数量不能为空!");
                        return;
                    }
                    if(list[key].num<=0){
                        alert("商品数量必须大于0!");
                        return;
                    }
                    if(parseInt(list[key].num)!=list[key].num){
                        alert("商品数量必须为整数!");
                        return;
                    }
                    goods = goods +
                        list[key].name + '!' +
                        list[key].price + '#' +
                        list[key].num + ';';
                }
                if(goods===''){
                    alert("商品不能为空!");
                    return;
                }
                axios.post(
                    '/deal/addDeal',
                    'userId='+this.contract.userId+
                    '&clientId='+this.contract.clientId+
                    '&content='+this.contract.content+
                    '&goods='+goods+
                    '&signTime='+this.contract.signTime
                ).then(function (res) {
                    if(res.data==='添加成功'){
                        app.addContractVisible = false;
                        app.resetForm();
                        app.addSuccess();
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            editForm() {

                if(this.editContract.clientId==''){
                    alert("客户不能为空");
                    return;
                }
                if(this.editContract.signTime==''){
                    alert("时间不能为空");
                    return;
                }
                if(this.editContract.dealContent==''){
                    alert("合同内容不能为空");
                    return;
                }
                let goods = '';
                let list = this.editContract.goods;
                // 显微镜!1#1
                for(let key in list){
                    if(list[key].goodsname==''){
                        alert("商品名称不能为空!");
                        return;
                    }
                    if(list[key].goodsprice==''){
                        alert("商品单价不能为空!");
                        return;
                    }
                    if(list[key].goodsprice<=0){
                        alert("商品单价必须大于0!");
                        return;
                    }
                    if(list[key].goodsnumber==''){
                        alert("商品数量不能为空!");
                        return;
                    }
                    if(list[key].goodsnumber<=0){
                        alert("商品数量必须大于0!");
                        return;
                    }
                    if(parseInt(list[key].goodsnumber)!=list[key].goodsnumber){
                        alert("商品数量必须为整数!");
                        return;
                    }
                    goods = goods +
                        list[key].goodsname + '!' +
                        list[key].goodsprice + '#' +
                        list[key].goodsnumber + ';';
                }
                if(goods===''){
                    alert("商品不能为空!");
                    return;
                }
                axios.post(
                    '/deal/fixdeal',
                    'dealId='+this.editContract.dealId+
                    '&userId='+this.userId+
                    '&clientId='+this.editContract.clientId+
                    '&content='+this.editContract.dealContent+
                    '&goods='+goods+
                    '&signTime='+this.editContract.signTime
                ).then(function (res) {
                    if(res.data==='修改成功'){
                        app.editContractVisible = false;
                        app.editSuccess();
                        app.getContractList();
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            resetForm() {
                this.contract.clientId = '';
                this.contract.signTime = '';
                this.contract.content = '';
                this.contract.goods = [{
                    name: '',
                    price: '',
                    num: '',
                    key: Date.now()
                }];
            },
            removeGood(item) {
                let index = this.contract.goods.indexOf(item);
                if (index !== -1) {
                    this.contract.goods.splice(index, 1);
                }
            },
            addGood() {
                this.contract.goods.push({
                    name: '',
                    price: '',
                    num: '',
                    key: Date.now()
                });
            },
            addEditGood() {
                this.editContract.goods.push({
                    name: '',
                    price: '',
                    num: '',
                    key: Date.now()
                });
            },
            getClientList(){
                axios.post(
                    '/client/getAllClient'
                ).then(function (res) {
                    // console.info(res.data);
                    let list = res.data;
                    let bufferList = [];
                    for(let key in list){
                        let i = new Object();
                        i.clientId = list[key].clientid;
                        i.clientName = list[key].clientname;
                        bufferList.push(i);
                    }
                    app.clientList = bufferList;
                    // console.info(app.clientList);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getGoodList(){
                axios.post(
                    '/goods/getListOfGoods',
                    'currentPage=1&pageSize=10000'
                ).then(function (res) {
                    // console.info(res.data);
                    let list = res.data;
                    let bufferList = [];
                    for(let key in list){
                        let i = new Object();
                        i.goodsName = list[key].goodsname;
                        i.goodsNumber = list[key].goodsnumber;
                        i.threshold = list[key].threshold;
                        bufferList.push(i);
                    }
                    app.goodsList = bufferList;
                    // console.info(app.goodsList);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getContractList(){
                axios.post(
                    '/deal/getListOfDeal',
                    "currentPage=1&pageSize=10000"
                ).then(function (res) {
                    // console.info(res.data);
                    let list = res.data;
                    let bufferList = [];
                    for(let key in list){
                        let i = new Object();
                        i.canFix = list[key].canFix;
                        i.dealContent = list[key].dealcontent;
                        i.dealId = list[key].dealid;
                        i.dealTime = app.toTimes1(list[key].dealtime);
                        i.signTime = app.toTimes1(list[key].signtime);
                        bufferList.push(i);
                    }
                    app.contractList = bufferList;
                    // console.info(app.contractList);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getUserList(){
                axios.post(
                    '/member/getListOfUser',
                    'currentPage=1&pageSize=1000'
                ).then(function (res) {
                    // console.info(res.data);
                    let list = res.data;
                    let bufferList = [];
                    for(let key in list){
                        let i = new Object();
                        i.userId = list[key].userid;
                        i.userName = list[key].username;
                        bufferList.push(i);
                    }
                    app.userList = bufferList;
                    // console.info(app.userList);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            addSuccess(){
                this.$message({
                    message:'添加成功',
                    type:'success'
                });
            },
            editSuccess(){
                this.$message({
                    message:'修改成功',
                    type:'success'
                });
            },
            deleteSuccess(){
                this.$message({
                    message:'删除成功',
                    type:'success'
                });
            },
            edit(contract){
                this.editContractVisible = true;
                axios.post(
                    '/deal/getDeal',
                    "dealId="+contract.dealId
                ).then(function (res) {
                    // console.info(res.data);
                    let message = res.data.message;
                    let goods = res.data.goods;
                    let i = new Object();
                    i.canFix = message.canFix;
                    i.dealContent = message.dealcontent;
                    i.dealId = message.dealid;
                    i.dealTime = app.toTimes1(message.dealtime);
                    i.clientId = message.fkClientid;
                    i.clientName = message.fkClientname;
                    i.userId = message.fkStaffid;
                    i.userName = message.fkStaffname;
                    i.signTime = message.signtime;
                    i.goods = goods;
                    app.editContract = i;
                    // console.info(app.editContract);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            view(contract){
                this.viewContractVisible = true;
                axios.post(
                    '/deal/getDeal',
                    "dealId="+contract.dealId
                ).then(function (res) {
                    // console.info(res.data);
                    let message = res.data.message;
                    let goods = res.data.goods;
                    let i = new Object();
                    i.canFix = message.canFix;
                    i.dealContent = message.dealcontent;
                    i.dealId = message.dealid;
                    i.dealTime = app.toTimes1(message.dealtime);
                    i.clientId = message.fkClientid;
                    i.clientName = message.fkClientname;
                    i.userId = message.fkStaffid;
                    i.userName = message.fkStaffname;
                    i.signTime = app.toTimes1(message.signtime);
                    i.goods = goods;
                    app.viewContract = i;
                    // console.info(app.viewContract);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            delete1(index, contract){
                this.$confirm('将删除此合同, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post(
                        '/deal/deleteDeal',
                        "dealId="+contract.dealId
                    ).then(function (res) {
                        // console.info(res.data);
                        if(res.data==='删除成功'){
                            app.deleteSuccess();
                            app.contractList.splice(index, 1);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            toTimes1(time){
                //时间戮转时间格式
                let date = new Date(time);//时间戳为13位的话不需乘1000
                let Y = date.getFullYear() + '-';
                let M = ('0'+(date.getMonth()+1)).substr(-2) + '-';
                let D = ('0'+date.getDate()).substr(-2) + ' ';
                let h = ('0'+date.getHours()).substr(-2) + ':';
                let m = ('0'+date.getMinutes()).substr(-2) + '';
                //let s = ('0'+date.getSeconds()).substr(-2);
                return Y+M+D+h+m;
            },
        },
    })
</script>
</body>
</html>